<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="/html/axios.min.js"></script>
  <script src="/html/util.js"></script>
  <script>
    var id = getQuery("id");
    window.onload = function (){
        showProduct();
    }
    function showProduct(){
        axios.get("/product/findById",{
            params: {
                id
            }
        }).then(e =>{
            var info = e.data;
            $("productImg").src="/html/image/"+info.img;
            $("nameSpan").innerHTML=info.name;
            $("priceSpan").innerHTML=info.price;

            var str = "";
            for (var i=0;i<info.speakList.length;i++){
                var obj = info.speakList[i];
                str +=`<tr><td>${obj.user.name}</td><td>${obj.content}</td><td>${obj.speakDate}</td></tr>`
            }
            $("speakData").innerHTML = str;
        });
    }

    function addSpeak(){
        axios.get("/speak/add",{
            params: {
                productId: id,
                content: $("content").value
            }
        }).then(e=>{
            if (e.data =="ok"){
                showProduct();
            }
        })
    }

  </script>
</head>
<body>
    <h2>商品详情页面</h2>
<img src="" id="productImg" width="200" height="200">
商品名:<span id="nameSpan"></span><br>
    单价:<span id="priceSpan"></span><br>
评论:
<table border="1" cellspacing="0" width="60%">
  <thead><tr><th>评论人</th><th>评论内容</th><th>评论时间</th></tr></thead>
  <tbody id="speakData">

  </tbody>
</table>
发表评论<br>
评论内容:<input type="text" id="content"><br>
    <input type="button" value="添加评论" onclick="addSpeak()">
</body>
</html>